@import "reset.css";
html,body,.container{
  width: 100%;
  height: 100%;
}
body{
  background: #EEEEEE;
}
.container{
	display: flex;
	flex-direction: column;
}
header{
	flex-shrink: 0;
	height: 45px;
	background: #fff;
	border-bottom:1px solid #E5E5E5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	span{margin: 0 10px;font-size: 15px;}
}
main{
	flex-shrink: 1;
	flex-grow: 1;
	overflow-y: auto;
	margin-bottom: 55px;
	.addressBox{
		background: #fff;
		padding: 10px 0;
		.info{margin-left:20px;
			  margin-bottom: 10px;
			  span:nth-child(1){font-size:14px;margin-right: 15px;}
		}	
		.address{
			display: flex;
			justify-content: space-between;
			p{margin:0 10px;}
		}
	}
	.strip{height: 10px;background:url(../img/2.png);}
	.shop{
		padding-top:10px;
		padding-bottom:10px;
		background: #fff;
		.tit{padding-bottom:10px;}
		.home{color: #FF701A;margin:0 10px;}
		.shopname{font-size: 14px;}
		dl{
			display: flex;			
			margin: 0 10px;
			dt{margin-right: 20px;}
			img{width: 100px;height: auto;}
			dd{
			    flex:1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				h3{font-size: 15px;}
				div{
					display: flex;
					justify-content: space-between;				
					.price{
						display:flex;
						flex-direction: column;
						span:nth-child(1){
							color: #FF424E;
							label{font-size: 14px;}
						}
						span:nth-child(2){
							text-decoration: line-through;
							margin-top: 5px;
						}
					}
					.sum{
						display: flex;
						align-items: center;
						span{
							display: inline-block;
							border:1px solid #ccc;
							width: 25px;
							height: 25px;
							text-align: center;
							line-height:25px;
							font-size: 16px;
							&:nth-child(1){border-right:none;}
							&:nth-child(3){border-left:none;}
						}
						input{
							width: 30px;text-align: center;
							border:1px solid #ccc;outline: none;
							height: 23px;}
					}
					
				}
			}
		}
		ul{
			margin-top: 15px;
			li{
				display: flex;
				justify-content: space-between;
				margin: 10px 0;
				p{
					margin:0 10px;				
				}
				.money{color: #F83C4D;font-size: 14px;}
			}
		}
	}
	.pay{
		background: #fff;
		ol{
			padding-left:10px; 
			div{
				line-height: 50px;
				border-bottom:1px solid #E5E5E5;
				display: flex;
				justify-content: space-between;
				align-items: center;
				p{
					span{font-size: 14px;}
				}
				.checkbox{
		            position: absolute;
		            left: -10000px;
		            width: 0;
		            height: 0;
		            visibility: hidden;
		        }
		        .checkbox-label{
		            display: inline-block;
		            width: 55px;
		            height: 25px;
		            position: relative;
		            border:2px solid #e9e9e9;
		            border-radius: 30px;
		            margin-right: 10px;
		        }
		        .checkbox-label:after{
		            content: '';
		            width: 23px;
		            height: 23px;
		            top: 1px;
		            left: 1px;
		            background: #e9e9e9;
		            position: absolute;
		            border-radius: 30px;
		            transition: all 0.5s;
		        }
		        .checkbox:checked + label:after{
		            left: 31px;
		            background: #fff;
		            transition: all 0.5s;
		        }
		        .checkbox:checked + .checkbox-label{
		            background: lightgreen;
		        }


				.checkbox2{
		            position: absolute;
		            left: -10000px;
		            width: 0;
		            height: 0;
		            visibility: hidden;
		        }
		        .checkbox-label2{
		            display: inline-block;
		            width: 55px;
		            height: 25px;
		            position: relative;
		            border:2px solid #e9e9e9;
		            border-radius: 30px;
		            margin-right: 10px;
		        }
		        .checkbox-label2:after{
		            content: '';
		            width: 23px;
		            height: 23px;
		            top: 1px;
		            left: 1px;
		            background: #e9e9e9;
		            position: absolute;
		            border-radius: 30px;
		            transition: all 0.5s;
		        }
		        .checkbox2:checked + label:after{
		            left: 31px;
		            background: #fff;
		            transition: all 0.5s;
		        }
		        .checkbox2:checked + .checkbox-label2{
		            background: lightgreen;
		        }

			}
			div:last-child{
				display: flex;
				justify-content: space-between;
				span{font-size: 14px;}
				span:nth-child(2){margin-right:10px;}
			}
		}
	}
}
footer{
	flex-shrink: 0;
	width: 100%;
	height: 55px;
	background: #fff;
	position: fixed;
	bottom: 0;
	display: flex;	
	justify-content: flex-end;
	p{height: 55px;width: 100px;text-align: center;}
	p:nth-child(1){
		display:flex;
		flex-direction: column;
		justify-content: center;		
		span:nth-child(1){color: #F71919;}
		span:nth-child(2){margin-top: 6px;}
	}
	p:nth-child(2){
		background: #FC4141;
		color: #fff;
		line-height: 55px;
		font-size: 14px;
	}
}